<template>
    <div class="info">
        <div class="top">
            <p class="sex-age ivu-mr-8">{{ info.gender_str }} {{ info.age }}岁</p>
            <p class="ivu-mr-8">创建时间：{{ info.created_at_str }}</p>
            <Button @click="handEdit" class="ivu-mr-8 ivu-ml-16" type="primary" size="small">编辑</Button>
        </div>
        <div class="content">
            <DescriptionList v-if="info && JSON.stringify(info) !== '{}'" :col="2">
                <Description term="手机号：">
                    {{ info.mobile[0] }}
                </Description>
                <Description term="病种：">
                    {{ info.patient_diseases_child_id_str ? info.patient_diseases_child_id_str : info.patient_diseases_id_str }}
                </Description>
                <Description term="归属人：	">
                    {{ info.belong_member_name }}
                </Description>
                <Description term="部位：">
                    {{ info.body_parts_ids_str.join(',') }}
                </Description>
                <Description term="城市：">
                    {{ info.city_name }}
                </Description>
                <Description term="来源备注：">
                    {{ info.source_remark }}
                </Description>
            </DescriptionList>
            <div class="remark">
                <p>备注
                    <Icon size="16" @click="handleToggleShowStatus" v-if="!remarkShow" type="md-create" />
                    <Icon size="16" @click="handleSubmitRemark" v-if="remarkShow" type="md-checkmark"/>
                    <Icon size="16" @click="handleCancel" v-if="remarkShow" type="md-close" />
                </p>
                <div @dblclick="handleToggleShowStatus">
                    <div v-if="!remarkShow" class="remarkInfo">{{ info.remark }}</div>
                    <Input v-else v-model="info.remark" type="textarea" :rows="4" placeholder="请输入备注" />
                </div>
            </div>
        </div>
        <!-- <Modal title="编辑" width="660" v-model="editModal" :mask-closable="false">
            <Form label-position="top">
                <Row :gutter="12">
                    <i-col span="8">
                        <FormItem label="姓名" required>
                            <Input />
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="年龄">
                            <InputNumber />
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="性别">
                            <RadioGroup>
                                <Radio label="男">男</Radio>
                                <Radio label="女">女</Radio>
                                <Radio label="未知">未知</Radio>
                            </RadioGroup>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="手机号">
                            <Input v-width="150" /><Button v-width="40" class="ivu-ml-8" type="primary">+</Button>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="城市">
                            <Input />
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="归属人" required>
                            <Select>
                                <Option value="王艳">王艳</Option>
                                <Option value="洪枫琪">洪枫琪</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="病种" required>
                            <Select>
                                <Option value="白癜风">白癜风</Option>
                                <Option value="白斑待查">白斑待查</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="部位">
                            <Select multiple :count="3">
                                <Option value="头部">头部</Option>
                                <Option value="躯干">躯干</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
        </Modal> -->
        <wechatpatientDetail ref="wechatpatientDetail"></wechatpatientDetail>
    </div>
</template>

<script>
import { patientindexeditremark } from '@/api/hqapi';
import wechatpatientDetail from '@/components/wechatpatientDetail';
export default {
    components: {wechatpatientDetail},
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            editModal: false,
            tagModal: false,
            remarkShow: false,
            tempRemark: ''
        };
    },
    methods: {
        handEdit() {
            this.$refs.wechatpatientDetail.initial(this.info.id); 
        },
        handleTag() {
            this.tagModal = true;
        },
        handleToggleShowStatus () {
            this.tempRemark = this.info.remark;
            this.remarkShow = true;
        },
        /**
         * 确认提交备注
         */
        handleSubmitRemark () {
            patientindexeditremark({
                id: this.info.id,
                remark: this.info.remark,
            }).then(() => {
                this.$Message.success('修改备注成功');
                this.remarkShow = false;
            });
        },
        /**
         * 取消修改备注
         */
        handleCancel () {
            this.info.remark = this.tempRemark;
            this.remarkShow = false;
        }
    }
};
</script>

<style lang="less" scoped>
.info {
    font-size: 12px;

    .top {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .sex-age {
            font-size: 16px;
            font-weight: bold;
        }
    }

    .content {
        padding: 10px;

        /deep/.ivu-description-term {
            padding-bottom: 4px;
            color: #666;
        }

        /deep/.ivu-description-detail {
            padding-bottom: 4px;
            font-weight: bold;
            font-size: 12px;
        }

        .remark {
            p {
                margin-bottom: 3px;
                color: #999;
            }

            .remarkInfo {
                font-weight: bold;
                line-height: 22px;
                height: 60px;
                overflow: auto;
            }
        }

    }
}
</style>